<style>
    .fenlei{width:49%;font-weight:400 !important;background:#f3f3f3;margin-right:1%;height:40px;line-height:40px;padding-left:16px;}
    .fenlei a{float:right;font-size:40px;color:#979797;height:40px;line-height:35px;margin-right:16px;}
    .img-del{height:128px;float:left;position: relative;margin-right:5px;}
    .img-del a{height:20px;position:absolute;bottom:0px;left:0px;background:#000;width:100%;text-align:center;opacity:0.7;filter:alpha(opacity=70);color:#fff;}
    .img-del img{height:100%;padding-top:5px;}
    .clear{clear:both;margin-top:10px;}
    .card-body{border:1px solid #ccc;}
    .card-body-content{padding:20px;}
</style>
<div class="col-md-12">
    <form action="" method="post" enctype="multipart/form-data">
        <input name="__check_token" type="hidden" value="{:md5(time())}"/>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">首页定制</h3>
            </div>
            <foreach name="home_list" item="info">
                <div class="card-body" style="padding:20px;" id="delete_home_config_{$info.id}">
                    <div class="card-body-content col-lg-12 col-12">
                        {$v.name|replace_keywords=I('get.keywords'),###}</h3>{:get_more_link(array(
                            "javascript:del_home_page('".$info['id']."')" => '删除',
                        ))}
                        <div class="form-group">
                            <label>首页名称</label>
                            <input type="text" name="name[{$info.id}]" value="{$info.name}" class="form-control my-colorpicker1">
                        </div>
                        <div class="form-group">
                            <label>首页简介</label>
                            <textarea name="desc[{$info.id}]" style="width: 100%;height:140px;border:1px solid #ccc;border-radius:5px;">{$info.desc}</textarea>
                        </div>
                        <div class="form-group">
                            <label>案例列表</label>
                            <div class="form-group" id="pinpai_list_{$info.id}">
                                <foreach name="info.tar_anli" item="v">
                                    <label class="fenlei" id="del_tag_{$v.id}">
                                        {$v.tag_info.name}
                                        <a href="javascript:void(0)" onclick="del_tag('{$v.id}')">删除</a>
                                    </label>
                                </foreach>
                            </div>
                            <a href="javascript:void(0)" data-toggle="modal" data-id="{$info.id}" data-target="#Pinpai">添加</a>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>首页图片</label>
                                    <div class="form-control" style="min-height:140px;height:140px">
                                        <div class="img-del" id='del_{$info.id}'>
                                            <img src="Upload/{$info.file_img.file_content.file_path|default='../IMG/no_img.png'}"/>
                                            <a href="javascript:$('#file_{$info.id}').click();">更换图片</a>
                                            <input type="file" name="file[{$info.id}]" id="file_{$info.id}" class="clear" style="display:none;">
                                        </div>
                                        建议图片比例：16:17<br/>选中文件名：
                                        <span id="img_logo_{$info.id}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>首页ICON</label>
                                    <div class="form-control" style="min-height:140px;height:140px">
                                        <div class="img-del" id='del_{$info.id}'>
                                            <img src="Upload/{$info.icon_img.file_content.file_path|default='../IMG/no_img.png'}"/>
                                            <a href="javascript:$('#file_icon_{$info.id}').click();">更换图片</a>
                                            <input type="file" name="icon[{$info.id}]" id="file_icon_{$info.id}" class="clear" style="display:none;">
                                        </div>
                                        建议图片比例：1:1<br/>选中文件名：
                                        <span id="img_icon_{$info.id}"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>首页ICON[选中]</label>
                                    <div class="form-control" style="min-height:140px;height:140px">
                                        <div class="img-del" id='del_{$info.id}'>
                                            <img src="Upload/{$info.icon_on.file_content.file_path|default='../IMG/no_img.png'}"/>
                                            <a href="javascript:$('#file_iconon_{$info.id}').click();">更换图片</a>
                                            <input type="file" name="icon_on[{$info.id}]" id="file_iconon_{$info.id}" class="clear" style="display:none;">
                                        </div>
                                        建议图片比例：1:1<br/>选中文件名：
                                        <span id="img_iconon_{$info.id}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </foreach>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="button" class="btn" id="add_home">添加</button>
            </div>
        </div>
    </form>
</div>
<div class="modal fade" id="Pinpai" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    请选择案例信息
                </h4>
            </div>
            <div class="modal-body">
                <select class="form-control my-colorpicker1 select2 select2_2" name="uid" style="width: 100%;">
                    <option value="">请选择</option>
                    <foreach name="project_list_all" item="v">
                        <option value="{$v.id}">{$v.name}</option>
                    </foreach>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
                <button type="button" class="btn btn-primary" data-id="" id="create_modal_pinpai">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="card-body-html">
    <div class="card-body" style="padding:20px;" id="delete_home_config_#ID_DATA">
        <div class="card-body-content col-lg-12 col-12">
            {$v.name|replace_keywords=I('get.keywords'),###}</h3>{:get_more_link(array(
                'javascript:del_home_page(#ID_DATA)' => '删除',
            ))}
            <div class="form-group">
                <label>首页名称</label>
                <input type="text" name="name[#ID_DATA]" value="首页" class="form-control my-colorpicker1">
            </div>
            <div class="form-group">
                <label>首页简介</label>
                <textarea name="desc[#ID_DATA]" style="width: 100%;height:140px;border:1px solid #ccc;border-radius:5px;">首页简介</textarea>
            </div>
            <div class="form-group">
                <label>案例列表</label>
                <div class="form-group" id="pinpai_list_#ID_DATA">
                </div>
                <a href="javascript:void(0)" data-toggle="modal" data-id="#ID_DATA" data-target="#Pinpai">添加</a>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>首页图片</label>
                        <div class="form-control" style="min-height:140px;height:140px">
                            <div class="img-del" id='del_#ID_DATA'>
                                <img src="Upload/../IMG/no_img.png"/>
                                <a href="javascript:$('#file_#ID_DATA').click();">更换图片</a>
                                <input type="file" name="file[#ID_DATA]" id="file_#ID_DATA" class="clear" style="display:none;">
                            </div>
                            建议图片比例：16:17<br/>选中文件名：
                            <span id="img_logo_#ID_DATA"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>首页ICON</label>
                        <div class="form-control" style="min-height:140px;height:140px">
                            <div class="img-del" id='del_#ID_DATA'>
                                <img src="Upload/../IMG/no_img.png"/>
                                <a href="javascript:$('#file_icon_#ID_DATA').click();">更换图片</a>
                                <input type="file" name="icon[#ID_DATA]" id="file_icon_#ID_DATA" class="clear" style="display:none;">
                            </div>
                            建议图片比例：1:1<br/>选中文件名：
                            <span id="img_icon_#ID_DATA"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>首页ICON[选中]</label>
                        <div class="form-control" style="min-height:140px;height:140px">
                            <div class="img-del" id='del_#ID_DATA'>
                                <img src="Upload/../IMG/no_img.png"/>
                                <a href="javascript:$('#file_iconon_#ID_DATA').click();">更换图片</a>
                                <input type="file" name="icon_on[#ID_DATA]" id="file_iconon_#ID_DATA" class="clear" style="display:none;">
                            </div>
                            建议图片比例：1:1<br/>选中文件名：
                            <span id="img_iconon_#ID_DATA"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script>
function del_tag(l_id) {
    $.get("{:U('Tag/delete')}", {tid:l_id}, function (d) {
        if (d.status == 1) {
            $('#del_tag_' + l_id).remove();
        }
    });
}
function del_home_page(tid){
    $.get("{:U('delete_home_page')}", {id: tid}, function (d) {
        if (d.success) {
            $('#delete_home_config_' + tid).remove();
        }
    });
}
$(function () {
    $('.fenlei a').html('×');
    $('#add_home').click(function(){
        $.get("{:U('add_home_page')}",function(d){
            $('.card-footer').before($('#card-body-html').html().replace('#ID_DATA',d.id));
        });
    });
    $('a[data-target=#Pinpai]').click(function(){
        var tid = $('#create_modal_pinpai').attr('data-id',$(this).attr('data-id'));
    });
    $('#Pinpai').modal('hide')
    $('#create_modal_pinpai').click(function(){
        var tid = $(this).attr('data-id');
        if(tid != ''){
            if($('select.select2_2').val() != ''){
                var ajax_data = {
                    lid:tid,// 标签ID
                    tid:$('select.select2_2').val(),// 案例编号
                    name:'tag'
                };
                $.get("{:U('Tag/create_link_project')}",ajax_data,function(d){
                    if(d.status == 1){
                        $.get("{:U('Tag/get_tag_info')}",{link_id:d.url},function(d){
                            eval('d = ' + d);
                            $('#pinpai_list_'+tid).append('<label class="fenlei"  id="del_tag_' + d.id + '">'+d.tag_info.name+'<a href="javascript:void(0)" onclick="del_tag(' + d.id + ')">删除</a></label>')
                        })
                    }
                });
            }
        }
        $('#Pinpai').modal('hide')
    });
    $(".select2_2").select2();
    $('input[type=file]').change(function(){
        var str=$(this).val();
        var that = this;
        if(str!==""){
            var arr=str.split("\\");
            var file_name=arr[arr.length-1].substr(0, 9) + '...';
            var obj_id = $(this).attr('id').split('_');
            if(obj_id[1] == 'icon'){
                // 如果是icon图标则将名称赋值到iconspan内
                $('#img_icon_'+obj_id[2]).html(file_name);
            } else if(obj_id[1] == 'iconon'){
                $('#img_iconon_'+obj_id[2]).html(file_name);
            } else {
                $('#img_logo_'+obj_id[1]).html(file_name);
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                $(that).prevAll('img').attr('src',evt.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
});
</script>